<template>
	<div class="info">
		<!-- 导航栏 -->
		<van-nav-bar title="商品详情"  left-arrow @click-left="onClickLeft">
		  <template #right>
		    <van-icon name="ellipsis" size="18" />
		  </template>
		</van-nav-bar>
		
		<div class="container">
			<img :src="infoData.goodsCoverImg" alt="">
			<h3>{{infoData.goodsIntro}}</h3>
			<p>免邮费 顺丰快递</p>
			<span>￥{{infoData.sellingPrice}}</span>
			<div v-html="infoData.goodsDetailContent"></div>
		</div>
		
		<!-- 加入购物车 -->
		<van-goods-action>
		  <van-goods-action-icon icon="chat-o" text="客服"/>
		  <van-goods-action-icon icon="cart-o" text="购物车" :badge="listCount" @click="goCart"/>
		  <van-goods-action-button type="warning" text="加入购物车" @click="addCart"/>
		  <van-goods-action-button type="danger" text="立即购买" />
		</van-goods-action>
	</div>
</template>

<script>
	import {mapActions} from "vuex";
	import { Toast } from 'vant';
	export default{
		name:"Info",
		data(){
			return{
				infoData:[]
			}
		},
		created(){
			this.getInfo();
			if(this.list==null){
				this.asyncgetCartList();
			}
		},
		methods:{
			...mapActions(["asyncgetCartList"]),
			getInfo(){
				this.$http.getDetialInfo(this.$route?.params?.aid)
				.then(res=>{
					console.log(res);
					if(+res.resultCode===200){
						this.infoData=res.data;
					}
					
				}).catch(err=>{
					console.log(err);
				})
			},
			onClickLeft(){
				this.$router.push("/home");
			},
			addCart(){
				this.$http.addCart({goodsId:this.$route?.params?.aid,goodsCount:1})
				.then(res=>{
					if(+res.resultCode===200){
						Toast.success('添加成功');
						this.asyncgetCartList();//重新发一次ajax请求，重新计算数值
					}else{
						Toast.fail(res.message||"添加失败");
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			goCart(){
				this.$router.push("/cart");
			}
		},
		computed:{
			list(){
				return this.$store.state.list;
			},
			listCount(){
				return this.$store.getters.listcount
			}
		}
	}
</script>

<style lang="less" scoped>
	.container{
		img{
			width:100%;
		}
		h3{
			font-size:16px;
			font-weight: normal;
			margin:5px;
		}
		p{
			font-size:14px;
			margin:5px;
			color:#A6A6C4;
		}
		span{
			font-size:18px;
			color:red;
			margin:5px;
		}
		margin-bottom:50px;
	}
</style>
